<template>
  <view class="page">
    <view class="container">
      <view class="list" v-if="invoiceList.length > 0">
        <view class="item" v-for="(item, index) in invoiceList" :key="index">
          <view class="top">
            <view class="date">{{item.create_time}}</view>
            <!-- 状态 0还款中 1已完成 3待取车 10租赁中 -->
            <view class="status" v-if="item.status===0">还款中</view>
            <view class="status" v-if="item.status===1">已完成</view>
            <view class="status" v-if="item.status===3">待取车</view>
            <view class="status" v-if="item.status===10">租赁中</view>
          </view>
          <view class="middle">
            <view class="main-box">
              <image :src="item.pic" />
              <view class="main-right">
                <view class="name">{{item.type_name}}</view>
                <view class="desc">{{item.seat_num}}座/{{item.door}}门/{{gearObj[item.gear]}}</view>
              </view>
            </view>
            <view class="use-time">用车时间：{{item.due}}</view>
            <view class="info">{{item.title}}</view>
          </view>
          <view class="bottom">
            <view class="price">待支付: <text
                style="color: #FF5700;font-size: 28rpx;font-weight: bold;">¥{{item.price_month}}元</text></view>
            <view class="btn default" @tap="viewOrder(item)">查看详情</view>
            <view class="btn" v-if="item.status===1" @tap="viewInvoice(item)">车辆出租</view>
          </view>
        </view>
      </view>
      <view class="no-tenant-box" v-else>
        <image src="./static/no_coupon.png" class="no-tenant-img" />
        <view class="text">您暂无可开票订单</view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getMyCarList
  } from '@/api/car.js'

  export default {
    data() {
      return {
        date: '',
        invoiceList: [],
        nav: 1, // 1：发票记录 2：抬头管理
        page: 1,
        limit: 30,
        loading: false,
        finished: false,
        navList: [{
            title: '发票抬头',
            image: '../static/invoice_img1.png',
            path: '/pages/users/invoice/title'
          },
          {
            title: '发票历史',
            image: '../static/invoice_img2.png',
            path: '/pages/users/invoice/history'
          },
          {
            title: '常见问题',
            image: '../static/invoice_img3.png',
            path: '/pages/users/invoice/question'
          },
        ],
        gearObj: {
          'auto': '自动挡',
          'hand': '手动挡'
        }
      }
    },
    onLoad() {
      console.log('onLoad')
    },
    onShow() {
      console.log('onShow')
      this.getInit()
    },
    methods: {
      goPage(item) {
        if (item.path) {
          uni.navigateTo({
            url: item.path
          })
        }
      },
      getInit() {
        this.page = 1;
        this.loading = false;
        this.invoiceList = []
        this.getInvoiceList()
      },
      // 记录列表
      getInvoiceList() {
        uni.showLoading({
          title: this.$t(`加载中`)
        });
        getMyCarList({

        }).then(res => {
          console.log('res', res)
          // const {
          // 	data
          // } = res;
          const data = res.data;
          uni.hideLoading();

          if (data) this.invoiceList = data;
          this.finished = data.length < this.limit;
        }).catch(err => {
          uni.showToast({
            title: err.msg,
            icon: 'none'
          });
        });
      },
      viewInvoice(item) {
        uni.navigateTo({
          url: 'pages/hire_sub/sublease/index'
        })
      },
      viewOrder(data) {
        const {
          id,
          type
        } = data
        if (type == 1) {
          uni.navigateTo({
            url: `/pages/myCar/newOrderDetail?order_id=${id}`
          })
        } else {
          uni.navigateTo({
            url: `/pages/car_sub/order/detail?order_id=${id}`
          })
        }

      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    min-height: 100vh;
    background-color: rgb(248, 249, 252);
  }

  .no-tenant-box {
    .no-tenant-img {
      width: 360rpx;
      height: 360rpx;
      display: block;
      margin: 200rpx auto 10rpx;
    }

    .text {
      text-align: center;
      font-size: 26rpx;
      color: #B9B9BD;
    }
  }

  .container {
    padding: 32rpx;
  }

  .list {}

  .item {
    background: #FFF;
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.9);
    padding: 32rpx 28rpx;
    border-radius: 10rpx;
    margin-bottom: 24rpx;

    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 24rpx;
      border-bottom: 1rpx solid #E7E7E7;

      .date {
        font-weight: 400;
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.6);
      }

      .status {
        font-weight: bold;
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.9);
      }
    }

    .middle {
      padding: 24rpx 0;

      .main-box {
        display: flex;
        align-items: center;
        margin-bottom: 24rpx;

        image {
          width: 332rpx;
          height: 160rpx;
          margin-right: 16rpx;
          border: 1rpx solid #ccc;
          box-sizing: border-box;
          border-radius: 4rpx;
        }

        .main-right {
          .name {
            font-weight: 600;
            margin-bottom: 20rpx;
            font-size: 32rpx;
            color: rgba(0, 0, 0, 0.9);
          }

          .desc {
            font-weight: 400;
            font-size: 24rpx;
            color: rgba(0, 0, 0, 0.6);
          }
        }
      }

      .use-time {
        margin-bottom: 24rpx;
        font-weight: 500;
        font-size: 26rpx;
        color: #333333;
      }

      .info {
        font-weight: 400;
        font-size: 26rpx;
        color: #333333;
      }
    }

    .bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 24rpx;
      border-top: 1rpx solid #E7E7E7;

      .price {
        font-weight: 500;
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.9);
        line-height: 33rpx;

        text {
          font-size: 22rpx;
        }
      }

      .btn {
        width: 160rpx;
        height: 72rpx;
        line-height: 72rpx;
        font-weight: 500;
        font-size: 24rpx;
        color: #FFFFFF;
        text-align: center;
        background: #008DFF;
        border-radius: 4rpx 4rpx 4rpx 4rpx;

        &.default {
          background: #F8F9FC;
          color: #000000;
        }

      }
    }
  }
</style>